import React, { useState } from 'react';
import SidebarMenuItem from './SidebarMenuItem';
import './SidebarMenu.css';

const SidebarMenu = ({ title = '菜单', onMenuClick }) => {
  const [menuItems] = useState({{MENU_DATA}});

  const handleMenuClick = (item) => {
    if (onMenuClick) {
      onMenuClick(item);
    }
    
    if (item.path) {
      // 使用 React Router 导航
      // window.location.href = item.path; // 简单实现
    }
  };

  return (
    <div className="sidebar-menu">
      <div className="menu-header">
        <h3>{title}</h3>
      </div>
      <ul className="menu-list">
        {menuItems.map(item => (
          <SidebarMenuItem
            key={item.id}
            item={item}
            onMenuClick={handleMenuClick}
          />
        ))}
      </ul>
    </div>
  );
};

export default SidebarMenu;
